/* section1模块开始 */
.sec1 {
    width: 100%;
}

.introduction {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 72px 0;
}

.introduction1,
.introduction2,
.introduction3 {
    position: relative;
    width: 100%;
    height: 240px;
}

.intro1,
.intro2 {
    margin-right: 24px;
}


.introduction1::after,
.introduction2::after,
.introduction3::after {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 82, 217);
    opacity: 0.7;
}

.introduction img {
    width: 100%;
    height: 100%;
}

.introduction h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    color: #FFF;
    font-weight: normal;
    font-size: 32px;
    transform: translate(-50%, -50%);
}

.introduction h2::after {
    content: '';
    display: block;
    width: 0%;
    height: 2px;
    margin-top: 7px;
    background-color: #FFF;
}

.introduction1:hover::after,
.introduction2:hover::after,
.introduction3:hover::after {
    display: block;
}

.introduction1:hover h2::after,
.introduction2:hover h2::after,
.introduction3:hover h2::after {
    animation-name: intro;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes intro {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

/* section1模块结束 */

/* section2模块开始 */
.sec2 {
    background-color: #1B1F25;
    color: #FFF;
}

.hotword {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* 文字部分 */
.hotword_title {
    width: 30%;
}

.hotword_title a {
    display: block;
    margin: 12px 0;
    color: rgb(141, 143, 146);
}

.hotword_title a h2 {
    position: relative;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.2em;
    margin: 12px 0;
}

.hotword_title a h2::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: -36px;
    width: 6px;
    height: 100%;
    background-color: rgba(25, 74, 195, 0);
}

.hotword_title a p {
    margin: 12px 0;
}

.hotword_title a p::after {
    content: '';
    display: block;
    visibility: hidden;
    width: 54px;
    height: 54px;
    background: url(../images/banner/icon_arrow_r.png) no-repeat;
    background-position: left center;
    background-size: contain;
}

.hotword_title .touch {
    color: #FFF;
    animation-name: appear;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

.hotword_title .touch h2::before {
    background-color: rgb(25, 74, 195);
}

.hotword_title .touch p::after {
    visibility: visible;

}

/* .hotword_title a:nth-child(n):hover {
    animation-name: appear;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
} */

@keyframes appear {
    100% {
        transform: translateX(36px);
    }
}

/* .hotword_title a:nth-child(n):hover {
    color: #FFF;
}

.hotword_title a:nth-child(n):hover h2::before {
    background-color: rgb(25, 74, 195);
}

.hotword_title a:nth-child(n):hover p::after {
    visibility: visible;
} */

/* 图片部分 */
.hotword_pic {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
}

.hotword_picture {
    width: 50%;
    position: relative;
}

.hotword_picture img {
    width: 100%;
    height: 280px;
}

.pic_bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
}

.pic_bottom a {
    display: block;
    width: 100%;
}

.hotword_picture h3 {
    position: relative;
    font-size: 25px;
}

.hotword_picture h3::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    display: block;
    width: 36px;
    height: 24px;
    background: url(../images/banner/icon_arrow_r.png) no-repeat;
    background-size: contain;
    background-position: -35px center;
    transform: translateY(-50%);
}

.hotword_picture p {
    display: none;
    font-size: 16px;
    font-weight: 300;
}

.hotword_picture h3,
.hotword_picture p,
.connect_center h3,
.connect_center p,
.connect_txt h2,
.connect_txt h5,
.connect_txt span,
.subbanner_txt_main h2,
.subbanner_txt_main h5 {
    margin: 12px 0;
}

.hotword_pic .hotword_picture:nth-child(n):hover .pic_bottom h3::after {
    animation-name: arrow_appear;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes arrow_appear {
    100% {
        background-position: 0px center;
    }
}

.hotword_pic .hotword_picture:nth-child(n):hover .pic_bottom p {
    display: block;
}

/* section2模块结束 */

/* section3模块开始 */
.sec3 {
    padding: 72px 0;
}

.connect {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #FFF;
}

/* 图片模块 */
.connect_pic {
    position: relative;
    width: 50%;
}

.connect_pic::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/index/section3_tri.png) no-repeat;
    background-position: bottom right;
    background-size: contain;
    /* 使用直角三角形在缩放情况下会出现小段断裂 */
    /* border-width: 258.4px 20px;
    border-color: transparent #FFF #FFF transparent;
    border-style: solid; */
}

.connect_pic:hover .connect_bottom a::after {
    animation-name: connect_appear;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

@keyframes connect_appear {
    0% {
        border-color: transparent;
    }

    100% {
        border-color: #FFF;
    }
}

.connect_pic img {
    width: 100%;
}

.connect_center {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 48px;
    color: #FFF;
}

.connect_center h3 {
    font-size: 25px;
}

.connect_center p {
    font-size: 16px;
    font-weight: 300;
}

.connect_bottom {
    position: absolute;
    right: 60px;
    bottom: 12px;
    z-index: 1;
}

.connect_bottom a {
    display: inline-block;
    width: 30px;
    height: 30px;
}

.connect_bottom a::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-top: 1px solid transparent;
}

.connect_bottom .connect_right::after {
    border-right: 1px solid transparent;
    transform: rotate(45deg);
}

.connect_bottom .connect_left::after {
    border-left: 1px solid transparent;
    transform: rotate(-45deg);
}

/* 文字部分 */
.connect_txt {
    width: 50%;
    padding-left: 72px;
}

.connect_txt a {
    color: #2B2E2E;
}

.connect_txt a:hover h2 {
    color: #0052D9;
}

.connect_txt h2 {
    font-size: 32px;
    font-weight: 540;
}

.connect_txt h5 {
    font-size: 18px;
    font-weight: 300;
}

.connect_txt span,
.subbanner_txt_main span {
    display: inline-block;
    width: 48px;
    height: 24px;
    background: url(../images/index/icon_arrow_r_dark.png) no-repeat;
    background-position: center left;
    background-size: contain;
}

/* section3模块结束 */

/* section4模块开始 */
.sec4 {
    position: relative;
    width: 100%;
}

.subbanner_img {
    width: 100%;
}

.subbanner_img img {
    width: 100%;
    object-fit: cover;
}

.subbanner_txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 8vw 6vw;
}

.subbanner_txt_main a:hover h2 {
    color: #0052D9;
}

.subbanner_txt_main h2 {
    font-size: 48px;
    font-weight: normal;
    line-height: 1.4em;
    color: #2B2E2E;
}

.subbanner_txt_main h5 {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.8em;
    color: #2B2E2E;
}

.subbanner_icon {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px 6vw;
}

.subbanner_icon_main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* section4模块结束 */

/* 页脚模块开始 */
.footer_part {
    width: 100%;
    height: 480px;
}

.footer_con {
    height: 480px;
    position: relative;
}

/* 关注模块 */
.focus {
    width: 100%;
    height: 89px;
    border-bottom: 1px solid #f2f3f5;
    padding-top: 33px;
    margin-bottom: 40px;
}

.focus .h_title {
    float: left;
    margin-right: 33px;
}

.footer_con .h_title {
    font-size: 20px;
    font-weight: normal;
    margin-bottom: 30px;
    color: #5f6464;
}

.focus ul {
    float: left;
}

.focus ul li {
    float: left;
    height: 28px;
    width: 28px;
    margin-right: 28px;
}

.focus .wechat_icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../images/index/footer-icon_wechat.png) no-repeat;
    background-size: contain;
}

.focus .wechat:hover .wechat_icon {
    background: url(../images/index/icon_wechat_hover.png) no-repeat;
    background-size: contain;
}

.focus .wechat_pic {
    display: none;
    position: absolute;
    left: 115px;
    top: -145px;
    width: 176px;
}

.focus .wechat:hover .wechat_pic {
    display: block;
}

.focus .weibo_icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../images/index/footer_icon_weibo.png) no-repeat;
    background-size: contain;
}

.focus .weibo:hover .weibo_icon {
    background: url(../images/index/icon_weibo_hover.png) no-repeat;
    background-size: contain;
}

.focus .twitter_icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../images/index/footer_icon_twitter.png) no-repeat;
    background-size: contain;
}

.focus .twitter:hover .twitter_icon {
    background: url(../images/index/icon_twitter_hover.png) no-repeat;
    background-size: contain;
}

.focus .in_icon {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(../images/index/footer_icon_in.png) no-repeat;
    background-size: contain;
}

.focus .in:hover .in_icon {
    background: url(../images/index/icon_in_hover.png) no-repeat;
    background-size: contain;
}

.mod_help {
    display: flex;
}

.mod_help dd {
    margin-bottom: 18px;
    font-size: 16px;
}

.mod_help dd a {
    color: #5f6464;
}

.mod_help dl {
    width: 216px;
}

/* logo_tencent部分 */
.logo_tencent {
    height: 28px;
    width: 212px;
    position: absolute;
    right: 75px;
    top: 50%;
}

.logo_tencent img {
    width: 100%;
}

/* footer_area部分 */
.footer_area {
    position: absolute;
    bottom: 51px;
    left: 0;
    width: 100%;
}

.footer_area ul li {
    float: left;
    margin-right: 20px;
}

.footer_area ul li a {
    font-size: 14px;
    color: #5f6464;
}

.footer_area p {
    float: left;
    margin-top: 12px;
    font-size: 14px;
    color: #5f6464;
}

.totop {
    display: block;
    position: fixed;
    right: 40px;
    bottom: -200px;
    z-index: 99;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #0052D9;
    background-color: #FFF;
}

.totop::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -25%) rotate(45deg);
    width: 12px;
    height: 12px;
    border-top: 1px solid #0052D9;
    border-left: 1px solid #0052d9;
}

.totop:hover {
    background-color: #0052D9;
}

.totop:hover::after {
    border-top: 1px solid #FFF;
    border-left: 1px solid #FFF;
}

/* 页脚模块结束 */